<!-- Intro.vue -->
<template>
  <div class="info">
    <!-- 遮罩背景图区域 -->
    <div class="mask-container" v-if="showDetail">
      <div class="mask" :style="{ backgroundImage: `url(${showDetail.posterURL})` }"></div>
      <div class="show-info">
        <div class="main">
          <div class="left">
            <div class="cover">
              <img :src="showDetail.posterURL" alt="演出封面" class="thumb" />
            </div>
          </div>
          <div class="right">
            <div class="title">
              <span class="city">{{ showDetail.siteName }}</span>
              {{ showDetail.showName }}
            </div>
            <div class="tags">
              <template v-for="(tag, index) in showDetail.recommendTagNames" :key="index">
                <span class="tag">#{{ tag }} </span>
              </template>
            </div>
          </div>
        </div>

        <div class="tours" v-if="tourSites.length > 0">
          <div class="favour">
            <van-icon name="like-o" />
            <p class="follow-text">关注</p>
          </div>
          <div class="tour-list">
            <template v-for="tour in tourSites" :key="tour.showId">
              <div class="tour-item" :class="{ active: tour.showId === showId }" @click="handleTourClick(tour.showId)">
                <div class="tour-content">
                  <div class="tour-name">{{ tour.cityName }}</div>
                  <div class="tour-date">{{ tour.firstShowTime }}</div>
                </div>
                <div class="tour-label">{{ tour.statusDisplayName }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="intro">
      <!-- 价格 & 时间 -->
      <div class="price-date">
        <div class="price">
          <span class="prefix">￥</span>
          {{ showDetail.minPrice }}起
          <span class="discount">{{ discountFormat }}折起</span>
        </div>
        <div class="date">{{ showDetail.showDate }}</div>
      </div>

      <!-- 地点 -->
      <div class="location">
        <div class="left">
          <div class="name">{{ showDetail.venueName }}</div>
          <div class="address">{{ showDetail.venueAddress }}</div>
        </div>
        <div class="right">
          <van-icon name="location" />
        </div>
      </div>

      <!-- 服务说明 -->
      <div class="services">
        <div class="content">
          <div class="service-tag">
            <template v-for="(service, index) in serviceNotes" :key="index">
              <div class="tag" v-if="service.showInBanner">
                <van-icon :name="service.icon" />
                <span>{{ service.name }}</span>
              </div>
            </template>
          </div>
          <div class="detail">{{ serviceDetailFirst }}</div>
        </div>
        <div class="more"><van-icon name="arrow" /></div>
      </div>

      <!-- 分割线 -->
      <van-divider :style="{
        height: '10px',
        backgroundColor: '#f5f5f5',
        marginTop: '0',
      }" />

      <!-- 安心保障 -->
      <div class="security-banner">
        <img :src="graduate" />
      </div>

      <!-- 立即购买按钮 -->
      <!-- <div class="buy-btn">
        <van-button type="primary" color="#ff1d41" block @click="onBuyClick"> 立即购买 </van-button>
      </div> -->

      <div class="refund" v-if="refunds">
        <h3>退票规则</h3>
        <p class="refundPolicyTitle">{{ refunds.refundPolicyTitle }}</p>
        <p class="apRuleRefundDesc">{{ refunds.apRuleRefundDesc }}</p>
        <p class="session-name"
          v-if="refunds.sessionApRuleRateItemV2VOs && refunds.sessionApRuleRateItemV2VOs.length > 0">
          {{ refunds.sessionApRuleRateItemV2VOs[0]?.sessionDesc }}
        </p>
        <div class="e-ticket-refund-rules" v-if="eTicketRefundRules && eTicketRefundRules.length > 0">
          <div class="e-ticket-refund-name">电子票退票规则：</div>
          <div class="e-ticket-refund-content">
            <div class="fee-table">
              <!-- 表头 -->
              <div class="table-header">
                <div class="table-cell time-cell">操作时间</div>
                <div class="table-cell fee-cell">手续费</div>
              </div>
              <!-- 数据行 -->
              <div class="table-row" v-for="(rule, index) in eTicketRefundRules" :key="index">
                <div class="table-cell time-cell" :class="{ expired: rule.expired }">
                  {{ rule.timeRange }}
                </div>
                <div class="table-cell fee-cell" :class="{ expired: rule.expired }">
                  {{ rule.rateDesc }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="paper-refund-name" v-if="paperRefundRules">纸质票退票规则：</div>
        <p class="paper-refund-content" v-if="paperRefundRules">{{ paperRefundRules }}</p>

        <p class="apRuleSummaryDesc">{{ refunds.apRuleSummaryDesc }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { fetchTourSiteRefundRule } from '@/api/index.js'
import { computed, toRefs, ref, onMounted, watch } from 'vue'
import graduate from '@/asset/images/mtl-enter-graduate.png'

import { useRoute } from 'vue-router'
const route = useRoute()

const showId = computed(() => route.query.showId)

//退票规则
const refunds = ref(null)

const props = defineProps(['showDetail', 'tourSites', 'serviceNotes'])
const { showDetail, tourSites, serviceNotes } = toRefs(props)

// 折扣格式化
const discountFormat = computed(() => (showDetail.value.discount * 10).toFixed(1))

//服务内容
const serviceDetailFirst = computed(() => {
  const service = serviceNotes.value.find((service) => {
    return service.showInBanner === true
  })
  return service ? service.value : ''
})

// 电子票退票规则
const eTicketRefundRules = computed(() => {
  if (!refunds.value || !refunds.value.sessionApRuleRateItemV2VOs) {
    return []
  }

  const sessionApRule = refunds.value.sessionApRuleRateItemV2VOs[0]
  if (!sessionApRule || !sessionApRule.stockOrderTypeRuleVOS) {
    return []
  }

  const stockOrderTypeRule = sessionApRule.stockOrderTypeRuleVOS.find((item) => {
    return item.stockOrderType === 'ETICKET'
  })

  return stockOrderTypeRule && stockOrderTypeRule.sessionApRuleItemVOS
    ? stockOrderTypeRule.sessionApRuleItemVOS
    : []
})

// 纸质票退票规则
const paperRefundRules = computed(() => {
  if (!refunds.value || !refunds.value.sessionApRuleRateItemV2VOs) {
    return ''
  }

  const sessionApRule = refunds.value.sessionApRuleRateItemV2VOs[0]
  if (!sessionApRule || !sessionApRule.stockOrderTypeRuleVOS) {
    return ''
  }

  const stockOrderTypeRule = sessionApRule.stockOrderTypeRuleVOS.find((item) => {
    return item.stockOrderType === 'PAPER'
  })

  return stockOrderTypeRule && stockOrderTypeRule.noSupportRefundText
    ? stockOrderTypeRule.noSupportRefundText
    : ''
})

onMounted(() => {
  getTourSiteRefundRule(showId.value)
})

const emit = defineEmits(['changeShowId'])
// 更换演出站点
const handleTourClick = (showId) => {
  // 更换演出站点
  emit('changeShowId', showId)
}

// 事件处理
const onBuyClick = () => {
  console.log('点击立即购买')
  // 跳转到购票页或弹窗
}

// 可选：展示毕业证书图标
const showUpEnsure = () => {
  // 弹窗逻辑
}

// 获取退票规则
const getTourSiteRefundRule = async (showId) => {
  try {
    const { statusCode, data } = await fetchTourSiteRefundRule(showId)
    if (statusCode === 200) {
      refunds.value = data
      //  console.log('退票规则', refunds.value)
    }
  } catch (error) {
    console.log('获取退票规则失败', error)
  }
}
watch(showId, (newShowId, oldShowId) => {
  console.log('getTourSiteRefundRule')
  if (newShowId && newShowId !== oldShowId) {
    getTourSiteRefundRule(newShowId)
  }
})
</script>

<style scoped lang="scss">
.info {
  overflow: visible;

  .mask-container {
    width: 100%;
    // height: 300px;
    position: relative;
    overflow: hidden;

    .mask {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .show-info {
      // display: flex;
      // align-items: center;
      //  justify-content: flex-start;
      //  color: #fff;
      //  padding: 50px 15px 40px;
      //  position: relative;
      //  z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      color: #fff;
      padding: 50px 15px 40px;
      position: relative;
      z-index: 1;
      align-items: flex-start;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 31%);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: 0;
      }

      >* {
        position: relative;
        z-index: 1;
      }

      .main {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        color: #fff;
        position: relative;
        z-index: 1;
        gap: 15px;

        .left {
          .cover {
            width: 100px;
            height: 130px;
            overflow: hidden;
            border-radius: 6px;

            .thumb {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .right {
          .title {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.4;
            word-break: break-all;

            .city {
              font-size: 10px;
              font-weight: 500;
              color: #fff;
              padding: 2px 6px;
              border-radius: 4px;
              // margin-right: 8px;
              padding: 2px 4px;
              border: 1px solid #fff;
            }
          }

          .tags {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 10px;
            color: #fff;
            margin-top: 20px;
          }
        }
      }

      .tours {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        margin-top: 30px;

        .favour {
          font-size: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;

          .follow-text {
            writing-mode: vertical-lr;

            text-orientation: mixed;

            white-space: nowrap;
          }
        }

        .tour-list {
          display: flex;
          align-items: center;
          gap: 10px;
          flex: 1;
          justify-content: flex-start;
          overflow-x: auto;
          // 取消横向滚动条
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;

          &::-webkit-scrollbar {
            display: none;
          }

          .tour-item {
            position: relative;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 10px 16px;
            flex: 0 0 auto;

            &.active {
              border-color: #fff;
            }

            .tour-content {
              position: relative;

              .tour-name {
                font-size: 13px;
                font-weight: 500;
              }

              .tour-date {
                font-size: 12px;
              }
            }

            .tour-label {
              position: absolute;
              top: 0;
              right: 0;
              font-size: 8px;
              color: #ff1d41;
              background-color: #fff;
              padding: 2px 4px;
              border-top-right-radius: 10px;
              border-bottom-left-radius: 10px;
            }
          }
        }
      }
    }
  }

  .intro {
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    z-index: 1;
    position: relative;
    margin-top: -15px;

    .price-date {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #eaeaea;

      .price {
        font-size: 22px;
        font-weight: 700;
        color: #ff1d41;

        .prefix {
          font-size: 10px;
          font-weight: 400;
        }

        .discount {
          font-size: 12px;
          font-weight: 600;
          color: #fff;
          background-color: #ff1d41;
          border-radius: 4px;
          padding: 2px 4px;
          margin-left: 8px;
        }
      }

      .date {
        font-size: 12px;
        color: #666;
      }
    }

    .location {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #eaeaea;

      .left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .name {
          color: #323038;
          font-size: 14px;
          font-weight: 600;
        }

        .address {
          font-size: 12px;
          font-weight: 400;
          color: #95949d;
        }
      }

      .right {
        width: 50px;
        color: #8c9aff;
        border-left: 1px solid #eaeaea;
        text-align: center;
      }
    }

    .services {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 15px;
      gap: 20px;

      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .service-tag {
          display: flex;
          align-items: center;
          gap: 10px;

          .tag {
            font-size: 12px;
            flex: 0 0 auto;
          }
        }

        .detail {
          font-size: 12px;
          color: #95949d;
        }
      }

      .more {
        color: #999;
        flex: 0 0 auto;
      }
    }

    .security-banner {
      display: flex;
      align-items: center;
      padding: 0 15px;
      margin: 0 0 10px;

      img {
        width: 100%;
        display: block;
      }
    }

    // .buy-btn {
    //   margin-top: 15px;

    //   .van-button {
    //     height: 44px;
    //     font-size: 16px;
    //     font-weight: 600;
    //     border-radius: 22px;
    //   }
    // }

    .refund {
      z-index: 2;
      padding: 0 15px;
      margin-top: 10px;

      h3 {
        margin: 0;
        padding: 10px 0;
        font-size: 20px;
        font-weight: 700;
      }

      .refundPolicyTitle {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
      }

      .apRuleRefundDesc {
        font-size: 16px;
        white-space: pre-line;
      }

      .session-name {
        font-size: 14px;
        font-weight: 400;
      }

      .e-ticket-refund-rules {
        .fee-table {
          width: 100%;
          margin: 10px 0;
          border: 1px solid #ddd;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          background-color: #fff;
          display: table;
          table-layout: auto;

          .table-header {
            display: table-row;
            width: 100%;
            background-color: #f5f5f5;
            font-weight: bold;
            color: #333;

            .table-cell {
              display: table-cell;
              font-size: 14px;
              font-weight: 500;
              padding: 12px 6px;
              border-bottom: 1px solid #ddd;
              border-right: 1px solid #ddd;
              white-space: nowrap;

              &.time-cell {
                width: 1%;
              }

              &.fee-cell {
                width: auto;
              }

              &:last-child {
                border-right: none;
              }
            }
          }

          .table-row {
            display: table-row;

            .table-cell {
              display: table-cell;
              font-size: 12px;
              font-weight: 400;
              padding: 12px 6px;
              border-right: 1px solid #ddd;
              border-bottom: 1px solid #ddd;
              white-space: nowrap;

              &.time-cell {
                width: 1%;
              }

              &.fee-cell {
                width: auto;
              }

              &:last-child {
                border-right: none;
              }

              &.expired {
                text-decoration: line-through;
                color: rgb(149, 148, 157);
              }
            }

            &:last-child {
              .table-cell {
                border-bottom: none;
              }
            }
          }
        }

        .e-ticket-refund-name {
          font-size: 14px;
          font-weight: 400;
        }

        .e-ticket-refund-content {}
      }

      .paper-refund-name {
        font-size: 14px;
        font-weight: 400;
      }

      .paper-refund-content {
        font-size: 14px;
        font-weight: 400;
      }

      .apRuleSummaryDesc {
        font-size: 16px;
        white-space: pre-line;
      }
    }
  }
}
</style>
